<!-- <template>
  <view class="order-container" style="height: 100vh">
    <view class="order-status" v-if="status !== 5">
      <view class="status-icon">
        <u-icon size="22" name="clock" margin-right="5"></u-icon>
      </view>
      <view class="status-text">
        <text v-if="status === 1">待到店使用</text>
        <text v-else
          >待付款，还剩
          <u-count-down :time="time" format="mm:ss" class="countdown" millisecond @finish="handleFinish"></u-count-down>
        </text>
      </view>
    </view>
    <view class="order-status" v-if="status === 5">
      <view class="status-icon">
        <u-icon size="22" name="close" margin-right="5"></u-icon>
      </view>
      <view class="status-text"> 订单已取消 </view>
      <view class="status-description" v-if="status === 5"> 订单因长时间未付款，交易已经取消 </view>
    </view>
    <view class="order-details" v-if="status === 1">
      <view class="details-section">
        <view class="activity-name">
          <text>{{ formData.activeName }}</text>
        </view>
        <view class="activity-info">
          <image class="activity-icon" :src="getImg(formData.icon)"></image>
          <view class="activity-description">
            <text class="ellipsis">{{ formData.ticketName }}</text>
            <text>{{ formData.merName }}</text>
            <view class="info-row">
              <text>数量 X{{ formData.totalNum }}</text>
              <view class="price-info" @click="getDetail">
                <text class="price">￥{{ formData.payPrice }}</text>
                <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
          </view>
        </view>
        <view class="qr-code-section">
          <view class="qr-code">
            <div id="qrcode"></div>
          </view>
        </view>
        <view class="voucher-codes">
          <view class="voucher-header">
            待使用券码 <text class="voucher-count">{{ formData.recordList ? formData.recordList.length : 0 }}</text> 张
          </view>
          <view class="voucher-list" v-for="(item, index) of formData.recordList" :key="index">
            <text class="voucher-code">· {{ item.ticketCode }}</text>
            <text class="copy-code" @click="onCopy(item.ticketCode)">复制</text>
          </view>
          <u-button class="refund-button" type="default" @click="onRefund">申请退款</u-button>
        </view>
      </view>
    </view>
    <view class="payment-section" v-if="status === 0">
      <view class="payment-options">
        <payment ref="payment" @onChange="onChange" />
      </view>
      <view class="action-buttons">
        <u-button class="cancel-button" type="primary" @click="onCancel" :loading="cancelLoading" round>取消订单</u-button>
        <u-button class="pay-button" type="success" :loading="loading" @click="onSubmit" round>￥{{ formData.payPrice }} 继续支付</u-button>
      </view>
    </view>
    <price-detail ref="priceDetail" :orderId="orderId" />
    <order-address :formData="formData" />
    <order-info :isPayTime="status === 1" :formData="formData" />
  </view>
</template>

<script>
import orderInfo from "./components/order_info.vue";
import payment from "@/components/payments/index.vue";
import QRCode from "qrcodejs2";
import priceDetail from "./components/price_detail.vue";
import orderAddress from "./components/order_address.vue";
import { mapGetters } from "vuex";
import { toBeUsedOrPay, orderCancel, orderPay } from "@/api/local.js";
import { localLifePayment } from "@/api/order.js";
import JsBarcode from "jsbarcode";
import getOrderPay from "@/mixins/getOrderPay.js";
import generateQRCode from "@/mixins/generateQRCode.js";

export default {
  mixins: [getOrderPay, generateQRCode],
  computed: mapGetters(["userInfo"]),
  components: {
    priceDetail,
    orderInfo,
    orderAddress,
    payment,
  },
  data() {
    return {
      time: 1800000,
      status: 1,
      orderId: "",
      id: "",
      formData: {
        recordList: [],
      },
      cancelLoading: false,
      loading: false,
      orderType: "pay_ls",
    };
  },
  onLoad(option) {
    this.orderId = option.orderId;
    this.id = option.id;
    this.status = option.status;
    this.toBeUsedOrPay();
  },
  methods: {
    onChange(type) {
      this.orderType = type;
    },
    handleFinish() {
      this.status = 5;
    },
    toBeUsedOrPay() {
      toBeUsedOrPay({
        orderId: this.orderId,
      }).then((res) => {
        this.formData = res.data.storeOrder || {};
        this.formData.activeName = res.data.ebMerActivity.name;
        this.formData.ticketName = res.data.ebMerActivityTicket.name;
        this.formData.merName = res.data.ebMer.merName;
        this.formData.recordList = res.data.ebMerActivityTicketRecordList || [];
        this.formData.businessTime = res.data.ebMer.businessTime;
        this.formData.merAddress = res.data.ebMer.merAddress;
        this.formData.merAvatar = res.data.ebMerActivityTicket.merAvatar;
        this.formData.orderId = this.orderId;
        this.formData.icon = res.data.ebMerActivity.icon;
        this.formData.merPhone = res.data.ebMer.merPhone;
        this.id = res.data.storeOrder.id;
        if (this.formData.recordList && this.formData.recordList.length) {
          this.formData.endTime = this.formData.recordList[0].endTime;
        }
        let date = new Date();
        let milliseconds = date.getTime();
        let createDate = new Date(this.formData.createTime || 0);
        let createTime = createDate.getTime() || 0;
        this.time = 1800000 - (milliseconds - createTime);
        if (this.status === 1) {
          this.$nextTick(() => {
            let myurl = "/pages/local_life_order/redempt?ticketCode=";
            if (this.formData.recordList && this.formData.recordList.length) {
              myurl += this.formData.recordList[0].ticketCode;
            }
            this.generateQRCode(myurl, 120, "qrcode");
          });
        }
      });
    },
    barcode() {
      JsBarcode("#barcode", "12334545", {
        format: "CODE128",
        width: 1,
        height: 60,
        displayValue: false,
        fontOptions: "bold italic",
        font: "fantasy",
        textAlign: "left",
        textPosition: "top",
        textMargin: 0,
        fontSize: 14,
        background: "#fff",
        lineColor: "#000",
        margin: 0,
      });
    },
    onCopy(text) {
      uni.setClipboardData({
        data: text,
        success: () => {
          uni.showToast({
            title: "复制成功",
            icon: "success",
          });
        },
      });
    },
    getDetail() {
      this.$refs.priceDetail.handleOpen();
    },
    onRefund() {
      uni.navigateTo({
        url: "/pages/local_life_order/refund?status=6&orderId=" + this.orderId + "&id=" + this.id,
      });
    },
    onCancel() {
      uni.showModal({
        title: "取消订单",
        content: "此操作将会取消此订单，请确定是否执行此操作？",
        success: (modelRes) => {
          if (modelRes.confirm) {
            this.cancelLoading = true;
            orderCancel({
              id: this.id,
              orderId: this.orderId,
            })
              .then((res) => {
                this.cancelLoading = false;
                this.$toast("取消成功");
                uni.navigateBack({
                  delta: 1,
                });
              })
              .catch(() => {
                this.$toast("取消失败");
                this.cancelLoading = false;
              });
          }
        },
      });
    },
    onSubmit() {
      if (this.orderType === "pay_yue" && Number(this.userInfo.nowMoney || 0) < Number(this.formData.payPrice || 0)) {
        this.$toast("所需金额大于账号余额，请先充值");
        return false;
      }
      this.loading = true;
      this.getOrderPay({
        id: this.id,
        orderNo: this.orderId,
        tab: 3,
        goPagesSuccess: 1,
        goPagesFail: 0,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.order-container {
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #f8f8f8;
}

.order-status {
  margin-bottom: 20rpx;
}

.status-icon {
  display: inline-block;
  vertical-align: middle;
}

.status-text {
  display: inline-block;
  font-size: 22rpx;
  font-weight: 500;
  margin-left: 10rpx;
}

.status-description {
  margin-top: 10rpx;
  font-size: 16rpx;
}

.order-details {
  margin-bottom: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
}

.activity-name {
  font-size: 16rpx;
  margin-bottom: 20rpx;
}

.activity-info {
  display: flex;
  align-items: center;
}

.activity-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
}

.activity-description {
  margin-left: 20rpx;
  width: calc(100% - 120rpx);
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-top: 10rpx;
}

.price-info {
  display: flex;
  align-items: center;
}

.price {
  font-size: 16rpx;
  font-weight: 500;
  color: #ff9500;
}

.qr-code-section {
  margin-top: 20rpx;
}

.qr-code {
  display: flex;
  justify-content: center;
}

.voucher-codes {
  margin-top: 20rpx;
}

.voucher-header {
  font-size: 16rpx;
  margin-bottom: 10rpx;
}

.voucher-count {
  color: #ff9500;
}

.voucher-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.voucher-code {
  font-size: 16rpx;
  font-weight: 500;
}

.copy-code {
  font-size: 12rpx;
  color: #06c1ae;
  background-color: #ebedf0;
  padding: 5rpx 10rpx;
  border-radius: 8rpx;
}

.refund-button {
  background-color: #f2f2f2;
  color: #333;
  margin-top: 20rpx;
}

.payment-section {
  margin-bottom: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
}

.payment-options {
  margin-bottom: 20rpx;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
}

.cancel-button {
  width: 240rpx;
}

.pay-button {
  flex: 1;
  margin-left: 20rpx;
}
</style> -->
